<template>
	<view class="statistics bg">
		<view class="title">数据统计</view>
		<view class="dataview">
			<view class="dataview-title">数据概览</view>
			<view class="dataview-cell">
				<view class="dataview-cell-value">9</view>
				<view class="dataview-cell-label">学生总数</view>

			</view>
			<view class="dataview-cell">
				<view class="dataview-cell-value">456</view>
				<view class="dataview-cell-label">未解锁家长数</view>
			</view>
			<view class="dataview-cell">
				<view class="dataview-cell-value">66</view>
				<view class="dataview-cell-label">已解锁家长数</view>
			</view>
		</view>
		<view class="charts-box">
			<view class="charts-box-title">项目解锁率占比</view>
			<qiun-data-charts type="ring" :opts="projectUnlockRingOpts" :chartData="projectUnlockRing" />
		</view>
		<view class="charts-box">
			<view class="charts-box-title">各项目未锁率人数</view>
			<qiun-data-charts type="mount"
				:opts="{legend: {show:false},extra:{mount:{type:'bar',widthRatio:0.3,borderWidth: 0,barBorderRadius: [50,50,0,0],}}}"
				:chartData="chartsDataMount" />
		</view>

		<view class="charts-box">
			<view class="charts-box-title">各班级未解锁项目数</view>
			<qiun-data-charts type="bar" :opts="{ legend: {show:false},extra: {  bar: {barBorderRadius: [50, 50, 0, 0], widthRatio: 0.1,  }
        }}" :chartData="chartsDataColumn1" />

		</view>

		<view class="charts-box" style="margin-bottom: 40rpx;">
			<view class="charts-box-title">
				解锁率趋势分析
			</view>
			<qiun-data-charts type="demotype" :opts="{xAxis:{boundaryGap:'justify'}}" :chartData="chartsDataLine2" />

		</view>

	</view>
</template>
<script>
	import demodata from '@/mockdata/demodata.json';
	import mapdata from '@/mockdata/mapdata.json'
	export default {
		components: {

		},
		data() {
			return {
				chartsDataLine2: {
					categories: ['1', '2', '3', '4', '5', '6', '7'],
					series: [

						{
							data: [
								34, 123, 56, 77, 11, 33, 88
							],
							name: '',
							// color: '##26BDBD'
						},


						// {
						// 	data: [],
						// 	name: '',
						// 	color: '#fff'
						// }
					]
				},
				chartsDataColumn1: {
					categories: ['3年2班', '3年2班', '3年2班', '3年2班', '3年2班', '3年2班', ],
					series: [

						{
							data: [
								34, 123, 56, 77, 11, 33
							],
							name: '',
							color: '#55C8FE'
						},
						{
							data: [],
							name: '',
							color: '#fff'
						},


					]

				},
				projectUnlockRingOpts: {
					legend: {
						position: 'bottom',
						formatter: (item) => {
							// item = { name, data, percent, color }
							return `${item.name}: ${item.data}`;
							// 或 `${item.name}: ${item.percent}%`
						}

					},
					title: {
						name: ""
					},
					subtitle: {
						name: ""
					},
					dataLabel: true,
					extra: {
						ring: {
							ringWidth: 30,
							centerColor: '#fff',
							// ✅ 显示标签（默认只显示百分比，这里改成自定义格式）
							labelShow: true,
							border: false

						}
					}
				},
				projectUnlockRing: {
					series: [{
							name: '已解锁 40人',
							data: 40,
							color: '#159B9B',
							percent: 40
						},
						{
							name: '已通知未解锁 30人',
							data: 30,
							color: '#12CDD3',
							percent: 30
						},
						{
							name: '未解锁 10人',
							data: 30,
							color: '#A5EAF7',
							percent: 30
						},
						// {
						// 	name: 'D 类',
						// 	data: 10,
						// 	color: '#4bc0c0'
						// }
					]
				},
				chartsDataMount: {
					series: [{
						data: [{
								name: "立定跳远",
								value: 10,
								color: '#26BDBD'

							},
							{
								name: "跳绳",
								value: 30,
								color: '#26BDBD'

							},
							{
								name: "50短跑",
								value: 5,
								color: '#26BDBD'
							},
							{
								name: "800长跑",
								value: 20,
								color: '#26BDBD'
							},
							{
								name: "1000长跑",
								value: 17,
								color: '#26BDBD'
							},
						]
					}],

				}
			}
		},

		onLoad() {},
		mounted() {
			setTimeout(() => {
				//	this.chartsDataColumn1 = JSON.parse(JSON.stringify(demodata.Column))
				//	this.chartsDataLine2=JSON.parse(JSON.stringify(demodata.Line))
				console.log(this.chartsDataLine2);
			}, 1000)

		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.statistics {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.charts-box {
		margin-top: 20rpx;
		width: 690rpx;
		border-radius: 12rpx;
		background: #FFFFFF;

		&-title {
			margin: 20rpx 20rpx 20rpx 30rpx;
			font-weight: bold;
			color: #1A1A1A;
			font-size: 32rpx;

		}
	}

	.title {
		box-sizing: border-box;
		width: 100%;
		padding-left: 30rpx;
		font-weight: bold;
		margin-top: 190rpx;
		font-size: 44rpx;
		color: #1A1A1A;
	}

	.dataview {
		z-index: 1;
		margin-top: 20rpx;
		display: flex;

		width: 690rpx;
		align-items: center;
		justify-content: space-around;
		height: 200rpx;
		border-radius: 8rpx;
		background: rgba(255, 255, 255, 0.6);
		border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 2;
		backdrop-filter: blur(4rpx);
		position: relative;

		&-title {
			position: absolute;
			top: 20rpx;
			left: 40rpx;
			font-size: 32rpx;
			color: #1A1A1A;
			font-weight: bold;
		}

		&-cell {
			margin-top: 20rpx;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-value {
				margin-top: 16rpx;
				font-size: 44rpx;
				font-weight: bold;
				color: #000;
			}

			&-label {
				font-size: 28rpx;
				color: #9E9E9E;
			}

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>